<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新闻</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/resources/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/resources/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="/resources/css/amazeui.min.css" />
    <script src="/resources/js/jquery.min.js"></script>

    <style type="text/css">
    html,body{
        height: 100%;
    }
    .active{
        background-color:#dddddd;
        color:red; 
    }
    </style>

</head>

<body>
<!-- 顶部 -->
    <%--<div style="background-color:#82a6f5;">--%>
        <%--<span style="line-height:50px;font-size:16px;position:absolute;left:45%;color:white;">新闻</span>--%>
    <%--</div>--%>
<!-- 中间 -->
<div id="center" style="width:100%;height:92%;overflow:auto;">
    <c:forEach items="${pageInfo.list}" var="a">
    <div class="am-g" onclick="news_info(${a.id})">
        <div class="am-u-sm-8">
            <div style="width:100%;height:80px;overflow: hidden;">${a.title}</div>
            <div>
                <small>
                    <span>【${a.reserve1}】</span>
                    <i>${a.relsDate}</i>
                </small>
            </div>
        </div>
        <div class="am-u-sm-4">
            <img src="/resources/img/111.jpg" style="width:100%;" onerror="this.src='/resources/img/111.jpg'" alt="新闻图片">
        </div>
    </div>
        <hr/>
    </c:forEach>
    <!-- 分页开始  //////  进入新闻  -->
    <div class="am-u-lg-12 am-cf content_pageinfor" id="div1">
        <!-- 分页文字信息，其中分页信息都封装在pageInfo中 -->
        <ul class="content_pageinfor_ul">
            当前第：${pageInfo.pageNum }页，总共：${pageInfo.pages }页，总共：${pageInfo.total }条记录
        </ul>
        <div class="am-fr" id="lik_id">
            <ul class="am-pagination tpl-pagination content_pageinfor_ul">
                <!-- 首页 -->
                <li><a href="/res/reserved?posion=1">首页</a></li>
                <!-- 上一页 -->
                <c:if test="${pageInfo.hasPreviousPage }">
                    <li>
                        <a href="/res/reserved?posion=${pageInfo.pageNum-1 }" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                </c:if>
                <!-- 循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接 -->
                <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
                    <c:if test="${page_Num == pageInfo.pageNum }">
                        <li class="am-active"><a href="/s/study?posion=${page_Num }">${page_Num }</a></li>
                    </c:if>
                    <c:if test="${page_Num != pageInfo.pageNum }">
                        <li><a href="/res/reserved?posion=${page_Num }">${page_Num }</a></li>
                    </c:if>
                </c:forEach>
                <!-- 下一页 -->
                <c:if test="${pageInfo.hasNextPage }">
                    <li>
                        <a href="/res/reserved?posion=${pageInfo.pageNum+1 }" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </c:if>
                <!-- 末页 -->
                <li><a href="/res/reserved?posion=${pageInfo.pages }">末页</a></li>
            </ul>
        </div>
    </div>
    <!-----------分页面结束-------->
</div>
<!-- 底部 -->
    <div class="am-g" style="background-color:rgba(255,255,255,0);border-color:#dddddd;height:8%;">

                <div id="company" class="am-u-sm-3" style="height:100%;border-radius:10px;">
                    <a href="#" style="display:block;color:#929292;margin-top:10px;"><b style="margin-left:30%;">公司</b></a>
                </div>
        <div id="news" class="am-u-sm-3 active" style="height:100%;border-radius:10px;">
            <a href="#" style="display:block;color:#929292;margin-top:10px;"><b style="margin-left:30%;">新闻</b></a>
        </div>
        <div id="stud" class="am-u-sm-3" style="height:100%;border-radius:10px;">
                    <a href="#" style="display:block;color:#929292;margin-top:10px;;"><b style="margin-left:30%;">学习</b></a>
                </div>
                <div id="content" class="am-u-sm-3" style="height:100%;border-radius:10px;">
                    <a href="#" style="display:block;color:#929292;margin-top:10px;"><b style="margin-left:30%;">我的</b></a>
                </div>
        </div>
    <script>
        $(document).ready(function(e){
            $("#company").click(function(){
                $(this).find("a").attr("href",'/index');
            });
            $("#stud").click(function(){
                $(this).find("a").attr("href",'/s/study');
            });
            $("#content").click(function(){
                $(this).find("a").attr("href",'/c/centre');
            });
            $("#news").click(function(){
                $(this).find("a").attr("href",'#');
            });
        })
        //新闻详情
        function news_info(id) {
            window.location.href="/res/newsInfo?id="+id;
        }
    </script>
</body>

</html>
